<template>
	<view class="content">
		<view class="big-txt">您好，</view>
		<view class="wel-txt">欢迎加入中国志愿者，立即<text class="red">注册</text></view>
		<view class="phone">177****3970</view>
		<u-button shape="circle" :ripple="true" class="default-login">本机号码一键登录</u-button>
		<navigator url="./password" hover-class="none" open-type="redirect">
			<view class="grey-btn">选择其他号码登录</view>
		</navigator>
		<bottom :third-party="true">
			<view class="agreement wel-txt">登录即同意<text class="red">《中国移动认证服务条款》</text></view>
		</bottom>
	</view>
</template>

<script>
	import Bottom from './components/bottom.vue'

	export default {
		components: {
			Bottom
		},
		onLoad() {
			console.log(`uniCloud : ${uniCloud}`, uniCloud);
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 70rpx 60rpx 30rpx;

		.default-login {
			color: #fff;
			background: linear-gradient(90deg, #FE614F 0%, #EB4D3C 100%);
			width: 100%;
		}
	}

	.big-txt {
		font-size: 72rpx;
		width: 100%;
	}

	.wel-txt {
		font-size: 36rpx;
		width: 100%;
		margin: 14rpx 0;
		color: $font-color-grey;
		.red {
			color: $font-color-red;
			margin-left: 6rpx;
		}
	}

	.phone {
		font-size: 60rpx;
		font-weight: 600;
		margin: 70rpx 0;
	}

	.grey-btn {
		color: $font-color-grey;
		font-size: 26rpx;
		margin-top: 20rpx;
	}
	
	.agreement{
		font-size: 22rpx;
		text-align: center;
	}
	
</style>
